<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
        }

        html {
            font-family: sans-serif;
            height: 100%;
        }

        body {
            overflow: hidden;
            height: inherit;
        }

        h1 {
            font-size: 2rem;
            letter-spacing: -1px;
            position: absolute;
            margin: 0;
            top: -4px;
            right: 5px;

            color: transparent;
            text-shadow: 0 0 4px white;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        //开启canvas代码提示
        /** @type {HTMLCanvasElement} */
        var canvas = document.querySelector('#canvas');
        console.log(canvas.width);
        var ctx = canvas.getContext('2d')

        // 画布宽高
        var w = canvas.width = window.innerWidth
        var h = canvas.height = window.innerHeight

        // 小球对象
        function r(num) {
            return Math.random() * num //[0,num]
        }

        /**
         * @description: 
         * @param {*} x 起始x坐标
         * @param {*} y 起始y坐标
         * @param {*} r 小球半径
         * @param {*} color 小球颜色
         * @param {*} xSpeed x轴速度
         * @param {*} ySpeed y轴速度
         * @return {*}
         */
        function Ball() {
            this.x = r(1) + 60
            this.y = r(1) + 60
            this.r = r(50) + 10 //[0,60]
            this.color = '#' + parseInt(Math.random() * 0xffffff).toString(16)
            this.xSpeed = r(5) + 15 //[5，15]
            this.ySpeed = r(5) + 15 //[5，15]
        }
        //小球显示方法
        Ball.prototype.show = function () {
            // 更新坐标
            this.run()
            ctx.beginPath()
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
            ctx.fillStyle = this.color
            ctx.fill()
        }
        //定义小球运动的方法(碰撞检测)
        Ball.prototype.run = function () {
            if (this.x - this.r <= 0 || this.x + this.r >= w) {
                this.xSpeed = -this.xSpeed
            }
            this.x = this.x + this.xSpeed
            if (this.y - this.r <= 0 || this.y + this.r >= h) {
                this.ySpeed = -this.ySpeed
            }
            this.y = this.y + this.ySpeed
        }

        //创建小球数组
        var ballArr = []
        for (var i = 0; i < 20; i++) {
            var ball = new Ball()
            ballArr.push(ball)
            ball.show()
        }

        setInterval(function () {
            // 清除画布 不清除则形成贪吃蛇效果
            ctx.clearRect(0, 0, w, h)
            for (const ball of ballArr) {
                ball.show()
            }
            // for (var i = 0; i < ballArr.length; i++) {
            //     ball = ballArr[i]
            //     ball.show()
            // }
        }, 50)

        //生成一个在中间的红球

        console.log(MyBall);
        // 键盘事件
        function doKeyDown() {
            switch (event.keyCode) {
                case 38://上键头
                    if (Serpengo.y <= 0) {//边界判断
                        break;
                    }
                    Serpengo.y -= 4;
                    draw();
                    break;
                case 40://下键头
                    if (Serpengo.y >= 500) {//边界判断
                        break;
                    }
                    Serpengo.y += 4;
                    draw();
                    break;
                case 37://左键头
                    if (Serpengo.x <= 0) {//边界判断
                        break;
                    }
                    Serpengo.x -= 4;
                    draw();
                    break;
                case 39://右箭头
                    if (Serpengo.x >= 600) {//边界判断
                        break;
                    }
                    Serpengo.x += 4;
                    draw();
                    break;
            }
        }
    </script>
</body>

</html>